import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Button } from 'react-vant';
import './clear.css';
import { Toast } from 'antd-mobile';

const Cleaning = () => {
  const navigate = useNavigate();
  const [time, setTime] = useState('');
  const [houseHao,setHouseHao] = useState("")
  const [note, setNote] = useState('');
  const [submitted, setSubmitted] = useState(false);

  const handleBack = () => {
    navigate(-1);
  };

  const handleSubmit = () => {
    if(!houseHao){
      alert("请输入房间号")
      return
    }

    if (!time) {
      alert('请选择打扫时间');
      return;
    }

    setSubmitted(true)

    setTimeout(() => {
      Toast.show({
        content: '打扫请求已提交',
        position: 'top',
      })
      setHouseHao("")
      setTime("")
      setSubmitted(false)
    }, 1500);

    
    // 在实际应用中，这里应该有API调用来提交打扫请求
    // setTimeout(() => {
    //   setSubmitted(false);
    //   alert('打扫请求已提交，我们将按时完成');
    // }, 1500);
  };

  return (
    <div className="">
      <div className="ljl-clear-header">
        <button className="ljl-back-button" onClick={handleBack}>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="30" height="30">
            <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
          </svg>
        </button>
        <h1 className="ljl-header-title">房间打扫</h1>
        <div className="ljl-header-right">
          <div className="ljl-dots-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24" height="24">
              <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
            </svg>
          </div>
        </div>
      </div>




      <div className='ljl-clear-bottom'>
        <div className='ljl-clear-bottom-title'>
          <div className='ljl-clear-bottom-title1'>房间打扫</div>
          <div>
            <div style={{ display: "flex" }}>
              <div className='ljl-clear-bottom-house'>
                房间号：
              </div>
              <input type="text"
                placeholder='请输入房间号'
                value={houseHao}
                onChange={(e) => {setHouseHao(e.target.value)}}
                className='ljl-clear-bottom-inp'
              />
            </div>

            <div style={{display:"flex",marginTop:"0.1rem"}}>
              <div className='ljl-clear-bottom-house'>
                打扫时间：
              </div>
              <select
                value={time}
                onChange={(e) => setTime(e.target.value)}
                className='ljl-clear-bottom-select'
              >
                <option value="">请选择时间段</option>
                <option value="9:00-10:00">9:00-10:00</option>
                <option value="10:00-11:00">10:00-11:00</option>
                <option value="11:00-12:00">11:00-12:00</option>
                <option value="14:00-15:00">14:00-15:00</option>
                <option value="15:00-16:00">15:00-16:00</option>
                <option value="16:00-17:00">16:00-17:00</option>
              </select>
            </div>
          </div>


          <div className='ljl-clear-bottom-font'>
            <div>请选择您期望的房间打扫时间，客房服务人员会按时为您进行</div>
            <div style={{marginTop:"0.2rem"}}>房间打扫!(仅可选择打扫自住房和关联房)</div>
          </div>
        </div>
        {/* <button 
            onClick={handleSubmit}
            disabled={submitted}
            
            className='ljl-clear-bottom-button'
          >
            提交打扫请求
          </button> */}
          <Button loading={submitted} loadingText='提交中...' onClick={handleSubmit} type='info' className='ljl-clear-bottom-button'>提交打扫请求</Button>
      </div>

    </div>
  );
};

export default Cleaning; 